import React, { Component } from 'react';
import { observable } from 'mobx';
import { observer, inject } from "mobx-react";
import PropTypes from 'prop-types';
import { Button, message, Input,
  Radio, Select, DatePicker } from 'antd';
import moment from 'moment';
import TabTitle from '@/components/TabTitle/TabTitle'
import OperationRecord from '@/components/OperationRecord/OperationRecord'
import http from '@/common/http';
import stringToArray from '@/common/stringToArray';
import './ImageEdit.less';

const RadioGroup = Radio.Group;
const Option = Select.Option;
const { RangePicker } = DatePicker;

@inject('rootStore') @observer
class ImageEdit extends Component {
  @observable imageCreateParam = {
    "advertisementCondition": 'en',
    "advertisementAssociateArticle": '',
    "advertisementAvailableStartTime": '',
    "advertisementAvailableEndTime": '',
    "advertisementCategory": '',
    "advertisementChargeType": 102,
    "advertisementLinkParam": {
      "type": '1',
      "url": ''
    },
    "advertisementPicture": '11',
    "advertisementPrice": '',
    "advertisementPublisher": '',
    "advertisementTitle": '',
    "advertisementTotalAmount": ''
  }
  @observable operationRecord = []

  state = {
    rageTime: []
  }

  componentDidMount() {
    const advertisementStore = this.props.rootStore.advertisementStore;

    if (!advertisementStore.adCategorySuccess) {
      advertisementStore.toGetAdsCategory();
    }

    if (this.props.match.params.type !== 'create') {
      this.toGetDetails()
      this.toGetOperation(this.props.match.params.type)
    } else {

    }
  }

  toGetDetails = () => {
    const globalStore = this.props.rootStore.globalStore;
    const param = {
      advertisementId: this.props.match.params.type
    }

    globalStore.toShowLoding()
    http.get('/advertisement/getAdvertisementById', param)
    .then((response) => {
      globalStore.toHideLoading()
      if (response.success) {
        const res = response.data
        this.imageCreateParam.advertisementCondition = res.advertisementCondition
        this.imageCreateParam.advertisementAssociateArticle = res.advertisementAssociateArticle
        this.imageCreateParam.advertisementAvailableStartTime = res.advertisementAvailableStartTime
        this.imageCreateParam.advertisementAvailableEndTime = res.advertisementAvailableEndTime
        this.setState({
          rageTime: [moment(res.advertisementAvailableStartTime), moment(res.advertisementAvailableEndTime)]
        })
        this.imageCreateParam.advertisementCategory = res.advertisementCategory
        this.imageCreateParam.advertisementChargeType = res.advertisementChargeType
        this.imageCreateParam.advertisementLinkParam.type = JSON.parse(res.advertisementUrl).type
        this.imageCreateParam.advertisementLinkParam.url = JSON.parse(res.advertisementUrl).url
        this.imageCreateParam.advertisementPrice = res.advertisementPrice
        this.imageCreateParam.advertisementPublisher = res.advertisementPublisher
        this.imageCreateParam.advertisementTitle = res.advertisementTitle
        this.imageCreateParam.advertisementTotalAmount = res.advertisementTotalAmount
      }
    })
  }

  toGetOperation = (id) => {
    const param = {
      articleId: id,
    }

    http.get('/news/articleOperate/page', param)
    .then((response) => {
      if (response.success) {
        this.operationRecord = response.data.dataList;
      }
    })
  }

  backToList = () => {
    const { history } = this.props;
    history.goBack();
  }

  conditionOnChange = (e) => {
    this.imageCreateParam.advertisementCondition = e.target.value
  }

  titleOnChange = (e) => {
    this.imageCreateParam.advertisementTitle = e.target.value
  }

  categoryOnChange = (value) => {
    this.imageCreateParam.advertisementCategory = value.join()
  }

  typeOnChange = (e) => {
    this.imageCreateParam.advertisementLinkParam.type = e.target.value
  }

  typeUrlOnChange = (e) => {
    this.imageCreateParam.advertisementLinkParam.url = e.target.value
  }

  publisherOnChange = (e) => {
    this.imageCreateParam.advertisementPublisher = e.target.value
  }

  availableTimeOnChange = (value) => {
    this.imageCreateParam.advertisementAvailableStartTime = moment(value[0]).format();
    this.imageCreateParam.advertisementAvailableEndTime = moment(value[1]).format();
  }

  timeChange = (value, dateString) => {
    console.log(value);
    this.setState({
      rageTime: value
    })
  }

  totalOnChange = (e) => {
    this.imageCreateParam.advertisementTotalAmount = e.target.value
  }

  chargeTypeOnChange = (e) => {
    this.imageCreateParam.advertisementChargeType = e.target.value
  }

  chargePriceOnChange = (e) => {
    this.imageCreateParam.advertisementPrice = e.target.value
  }

  articleOnChange = (e) => {
    this.imageCreateParam.advertisementAssociateArticle = e.target.value
  }

  imageCreateConfirm = () => {
    if (this.props.match.params.type !== 'create') {
      const globalStore = this.props.rootStore.globalStore;
      const { history } = this.props;
      globalStore.toShowLoding()
      http.post('/advertisement/updateAdvertisement', this.imageCreateParam)
      .then((response) => {
        globalStore.toHideLoading()
        if (response.success) {
          message.success('Success')
          setTimeout(() => {
            history.goBack();
          }, 600)
        }
      })
    } else {
      const globalStore = this.props.rootStore.globalStore;
      const { history } = this.props;
      globalStore.toShowLoding()
      http.post('/advertisement/createImageText', this.imageCreateParam)
      .then((response) => {
        globalStore.toHideLoading()
        if (response.success) {
          message.success('Success')
          setTimeout(() => {
            history.goBack();
          }, 600)
        }
      })
    }

  }

  static propTypes = {
    match: PropTypes.object.isRequired,
    history: PropTypes.object.isRequired
  }

  render() {
    const breadCrumb = ['Advertisement', 'Advertisement Create']
    const advertisementStore = this.props.rootStore.advertisementStore;

    return (
      <div className="news-edit">
        <TabTitle
          title="Advertisement"
          breadCrumb={breadCrumb} />
        <div className="page-content edit-form mt132">
          <div className="form-details">
            <div className="details-msg-form">
              <div className="ad-item">
                <label className="ad-title">Ad.condition:</label>
                <div className="ad-content">
                  <RadioGroup
                    onChange={this.conditionOnChange}
                    value={this.imageCreateParam.advertisementCondition}>
                    <Radio value="en">English</Radio>
                    <Radio value="zh">Chinese</Radio>
                  </RadioGroup>
                </div>
              </div>
              <div className="ad-item">
                <label className="ad-title">Title:</label>
                <div className="ad-content">
                  <Input
                    className="msg-item"
                    value={this.imageCreateParam.advertisementTitle}
                    onChange={this.titleOnChange} />
                </div>
              </div>
              <div className="ad-item">
                <label className="ad-title">Category:</label>
                <div className="ad-content">
                  <Select
                    className="msg-item"
                    mode="multiple"
                    placeholder="Please select"
                    value={stringToArray(this.imageCreateParam.advertisementCategory)}
                    onChange={this.categoryOnChange}>
                    {
                      advertisementStore.adCategoryList.map((item, index) => {
                        return (
                          <Option
                            key={item.id}
                            >{item.name}</Option>
                        )
                      })
                    }
                  </Select>
                </div>
              </div>
              <div className="ad-item">
                <label className="ad-title">Ad.link:</label>
                <div className="ad-content">
                  <RadioGroup
                    onChange={this.typeOnChange}
                    value={this.imageCreateParam.advertisementLinkParam.type}>
                    <Radio value="1">Native</Radio>
                    <Radio value="2">H5</Radio>
                    <Radio value="3">None</Radio>
                  </RadioGroup>
                  {
                    this.imageCreateParam.advertisementLinkParam.type === '2' ?
                    <Input
                      value={this.imageCreateParam.advertisementLinkParam.url}
                      onChange={this.typeUrlOnChange} />
                    :
                    null
                  }
                </div>
              </div>
              <div className="ad-item">
                <label className="ad-title">Publisher:</label>
                <div className="ad-content">
                  <Input
                    className="msg-item"
                    value={this.imageCreateParam.advertisementPublisher}
                    onChange={this.publisherOnChange} />
                </div>
              </div>
              <div className="ad-item">
                <label className="ad-title">Available Time:</label>
                <div className="ad-content">
                  <RangePicker
                    showTime={{ format: 'HH:mm' }}
                    format="YYYY-MM-DD HH:mm"
                    placeholder={['Start Time', 'End Time']}
                    value={this.state.rageTime}
                    onChange={this.timeChange}
                    onOk={this.availableTimeOnChange}
                  />
                </div>
              </div>
              <div className="flex-item">
                <label className="ad-title">Total Amount:</label>
                <div className="ad-content ad-aomout-content">
                  <div className="amount-input">
                    <Input
                      className="msg-item"
                      addonBefore="₱"
                      value={this.imageCreateParam.advertisementTotalAmount}
                      onChange={this.totalOnChange} />
                  </div>
                </div>
              </div>
              <div className="ad-item">
                <label className="ad-title">Charge Type:</label>
                <div className="ad-content">
                  <RadioGroup
                    value={this.imageCreateParam.advertisementChargeType}
                    onChange={this.chargeTypeOnChange}>
                    <Radio value={102}>CPC</Radio>
                    <Radio value={101}>CPM</Radio>
                    <Radio value={201}>Month</Radio>
                  </RadioGroup>
                  <Input
                    className="msg-item"
                    addonBefore="₱"
                    value={this.imageCreateParam.advertisementPrice}
                    onChange={this.chargePriceOnChange} />
                </div>
              </div>
              <div className="ad-item">
                <label className="ad-title">Associate Article:</label>
                <div className="ad-content">
                  <Input
                    className="msg-item"
                    value={this.imageCreateParam.advertisementAssociateArticle}
                    onChange={this.articleOnChange} />
                </div>
              </div>
              <div className="ad-item">
                <label className="ad-title">English Picture:</label>
                <div className="ad-content">
                </div>
              </div>
              <div className="ad-item">
                <label className="ad-title"></label>
                <div className="ad-content">
                  <Button
                    type="primary"
                    className="ad-content-btn"
                    onClick={this.imageCreateConfirm}>Submit</Button>
                  <Button
                    onClick={this.backToList}>Cancel</Button>
                </div>
              </div>
            </div>
          </div>
          {
            this.operationRecord && this.operationRecord.length !== 0 ?
            <OperationRecord
              operationRecord={this.operationRecord} />
            :
            null
          }
        </div>
      </div>
    )
  }
}

export default ImageEdit;
